<template>
  <view class="course-item">
    <view class="course-cover">
      <image :src="course.cover" mode="aspectFill" class="cover-image"></image>
      <view class="cover-mask"></view>
      <text v-if="course.isNew" class="new-tag">NEW</text>
    </view>
    
    <view class="course-info">
      <view class="course-title">{{ course.title }}</view>
      <view class="course-instructor">
        <up-icon name="person" size="14" color="#999"></up-icon>
        <text class="instructor-name">{{ course.instructor }}</text>
      </view>
      
      <view class="course-meta">
        <view class="meta-item">
          <up-icon name="clock" size="14" color="#999"></up-icon>
          <text class="meta-text">{{ course.duration }}</text>
        </view>
        <view class="meta-item">
          <up-icon name="person" size="14" color="#999"></up-icon>
          <text class="meta-text">{{ course.students }}人学习</text>
        </view>
      </view>
      
      <view class="course-price">
        <view class="price-info">
          <text v-if="course.isFree" class="free-tag">免费</text>
          <text v-else class="price">¥{{ course.price }}</text>
          <text v-if="!course.isFree && course.originalPrice > course.price" class="original-price">¥{{ course.originalPrice }}</text>
        </view>
        <up-rate :value="course.rating" readonly size="14" activeColor="#FFD700"></up-rate>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  course: {
    type: Object,
    required: true,
    default: () => ({
      id: 0,
      title: '',
      instructor: '',
      cover: '',
      duration: '',
      price: 0,
      originalPrice: 0,
      students: 0,
      rating: 0,
      isFree: false,
      isNew: false
    })
  }
})
</script>

<style lang="scss" scoped>
.course-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.course-cover {
  position: relative;
  height: 280rpx;
  
  .cover-image {
    width: 100%;
    height: 100%;
  }
  
  .cover-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
  }
  
  .new-tag {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    background: #ff4757;
    color: #fff;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
  }
}

.course-info {
  padding: 20rpx;
  
  .course-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 15rpx;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .course-instructor {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
    
    .instructor-name {
      font-size: 24rpx;
      color: #666;
      margin-left: 10rpx;
    }
  }
  
  .course-meta {
    display: flex;
    margin-bottom: 15rpx;
    
    .meta-item {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
      
      .meta-text {
        font-size: 22rpx;
        color: #999;
        margin-left: 6rpx;
      }
    }
  }
  
  .course-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .price-info {
      display: flex;
      align-items: center;
      
      .free-tag {
        font-size: 28rpx;
        color: #4ecdc4;
        font-weight: bold;
      }
      
      .price {
        font-size: 28rpx;
        color: #ff4757;
        font-weight: bold;
        margin-right: 10rpx;
      }
      
      .original-price {
        font-size: 22rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
  }
}
</style>